<template>
  <v-app>
    <lottie-player
      src="src/assets/1.json"
      background="transparent"
      speed="1"
      style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0.32;"
      loop
      autoplay
    />
    <div class="app-bg-blur-spot"></div>
    <div class="app-bg-blur-spot2"></div>
    <div v-if="loading" class="splash-loading">
      <v-progress-circular indeterminate color="primary" size="64" width="6" />
    </div>
    <div v-else class="layout-container">
      <v-navigation-drawer permanent width="256" class="cool-nav-drawer">
        <v-list>
          <v-list-item
            to="/"
            prepend-icon="mdi-home"
            title="返回首页"
            class="mb-2 v-list-item--home"
            style="font-weight: bold; font-size: 18px; color: #1976d2; background: rgba(25, 118, 210, 0.08); border-radius: 8px; margin: 16px 8px 12px 8px;"
          />
          <template v-for="item in menuList" :key="item.menu_id">
            <MenuTree :item="item" />
          </template>
        </v-list>
      </v-navigation-drawer>
      <div class="main-content">
        <div class="logout-btn-wrap">
          <v-btn icon @click="showLogoutDialog = true" title="退出登录">
            <v-icon color="primary">mdi-logout</v-icon>
          </v-btn>
        </div>
        <router-view />
      </div>
    </div>
    <v-dialog v-model="globalDialog.show" persistent max-width="400px">
      <v-card>
        <v-card-title class="text-h6">{{ globalDialog.title }}</v-card-title>
        <v-card-text>{{ globalDialog.text }}</v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" @click="onDialogConfirm">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 退出登录确认弹窗 -->
    <v-dialog v-model="showLogoutDialog" max-width="350">
      <v-card>
        <v-card-title class="text-h6">确认退出</v-card-title>
        <v-card-text>确定要退出登录吗？</v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="showLogoutDialog = false">取消</v-btn>
          <v-btn color="error" :loading="logoutLoading" @click="handleLogout">退出</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { API_BASE_URL } from '@/config/api'
import MenuTree from './MenuTree.vue'
import { logout as apiLogout } from '@/api/auth'

const menuList = ref([])
const loading = ref(true)
const router = useRouter()

// 退出登录弹窗与加载
const showLogoutDialog = ref(false)
const logoutLoading = ref(false)

function filterStatus(menuArr) {
  return menuArr
    .filter(item => item.status === 1)
    .map(item => ({
      ...item,
      children: item.children ? filterStatus(item.children) : []
    }))
}

function loadMenu() {
  return axios.post(`${API_BASE_URL}/actions/menuManageUrl/getMenuListLeft`).then(res => {
    menuList.value = filterStatus(res.data.data || [])
        // 添加操作日志管理菜单
        menuList.value.push({
          menu_id: 'opera-manage-1',
          title: '操作日志管理',
          path: '/opera-manage',
          status: 1,
          children: []
        })
  })
}

onMounted(() => {
  loadMenu()
  setTimeout(() => { loading.value = false }, 600) // 保证动画体验
})

// 让全局都能访问刷新菜单方法
window.__loadMenu = loadMenu

async function handleLogout() {
  logoutLoading.value = true
  try {
    await apiLogout()
  } catch (e) {}
  localStorage.removeItem('token')
  menuList.value = []
  logoutLoading.value = false
  showLogoutDialog.value = false
  router.push('/login')
}

// 全局dialog
const globalDialog = reactive({
  show: false,
  text: '',
  title: '登录状态已失效',
  onConfirm: null
})
window.__showGlobalDialog = (text, onConfirm) => {
  globalDialog.text = text
  globalDialog.show = true
  globalDialog.onConfirm = onConfirm
}
function onDialogConfirm() {
  globalDialog.show = false
  if (typeof globalDialog.onConfirm === 'function') {
    globalDialog.onConfirm()
  }
}
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
}
.v-navigation-drawer.cool-nav-drawer {
  position: relative;
  height: 100vh;
  background: rgba(36,37,42,0.92) !important;
  border-right: 1.5px solid #23243a;
  box-shadow: 0 8px 32px 0 rgba(60,60,80,0.18), 0 2px 8px 0 #23243a;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.main-content {
  flex: 1;
  padding: 32px 24px;
  overflow: auto;
  margin-left: 256px;
  background: var(--v-theme-surface);
  position: relative;
}
.app-bg-blur-spot {
  position: fixed;
  left: 10vw;
  top: 10vh;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, #5c6bc0 0%, #23243a 80%);
  opacity: 0.18;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.app-bg-blur-spot2 {
  position: fixed;
  right: 8vw;
  bottom: 8vh;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, #00bcd4 0%, #23243a 80%);
  opacity: 0.13;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.v-list-item--home {
  transition: background 0.2s;
}
.v-list-item--home:hover {
  background: rgba(25, 118, 210, 0.18) !important;
  color: #1565c0 !important;
}
.splash-loading {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logout-btn-wrap {
  position: absolute;
  top: 16px;
  right: 32px;
  z-index: 10;
}
</style>
